import { Badge } from '/components/badge'

# Events

This section will introduce the events of Umo Editor. Through events, you can listen to the complete lifecycle and state changes of Umo Editor for more operations. You can visit https://demo.umodoc.com/editor?pane=events&lang=en-US, open the console (DevTools › Console) to view the triggering of events.

## Example

```vue {4-26}
<template>
  <umo-editor
    v-bind="options"
    @before-create="onBeforeCreate"
    @created="onCreated"
    @changed="onChanged"
    @changed:selection="onChangedSelection"
    @changed:transaction="onChangedTransaction"
    @changed:menu="onChangedMenu"
    @changed:toolbar="onChangedToolbar"
    @changed:page-size="onChangedPageSize"
    @changed:page-orientation="onChangedPageOrientation"
    @changed:page-margin="onChangedPageMargin"
    @changed:page-background="onChangedPageBackground"
    @changed:page-zoom="onChangedZoom"
    @changed:page-show-toc="onChangedPageShowToc"
    @changed:page-preview="onChangedPreview"
    @changed:page-watermark="onChangedPageWatermark"
    @changed:locale="onChangedLocale"
    @changed:theme="onChangedTheme"
    @conent-error="onContentError"
    @print="onPrint"
    @focus="onFocus"
    @blur="onBlur"
    @saved="onSaved"
    @destroy="onDestroy"
  />
</template>
 
<script setup>
  import { ref } from 'vue';
  import { UmoEditor } from '@umoteam/editor';

  const options = ref({
    // Configuration options
    // ...
  });

  // Event handler functions go here ...
  // Before creation lifecycle hook
const onBeforeCreate = () => {
  console.log('onBeforeCreate', 'Editor is about to be created, no available parameters');
};

// Creation lifecycle hook
const onCreated = () => {
  console.log('onCreated', 'Editor has been created, available parameters:', { editor });
};

// Content change hook
const onChanged = () => {
  console.log('onChanged', 'Editor content has been updated, available parameters:', { editor });
};

// Selection change hook
const onChangedSelection = () => {
  console.log('onChanged:selection', 'Selected content has changed, available parameters:', { editor });
};

// Transaction state change hook
const onChangedTransaction = () => {
  console.log(
    'onChanged:transaction',
    'Editor state has changed, available parameters:', { editor, transaction }
  );
};

// Menu status change hook
const onChangedMenu = (currentMenu) => {
  console.log(
    'onChanged:menu',
    'Menu bar status has changed, available parameter: currentMenu, current menu is', currentMenu
  );
};

// Toolbar info change hook
const onChangedToolbar = ({ toolbar, oldToolbar }) => {
  console.log(
    'onChanged:toolbar',
    'Toolbar information has changed, available parameters:', { toolbar, oldToolbar }
  );
};

// Page size change hook
const onChangedPageSize = ({ pageSize, oldPageSize }) => {
  console.log(
    'onChanged:pageSize',
    'Page size information has changed, available parameters:', { pageSize, oldPageSize }
  );
};

// Page orientation change hook
const onChangedPageOrientation = ({ pageOrientation, oldPageOrientation }) => {
  console.log(
    'onChanged:pageOrientation',
    'Page orientation has changed, available parameters:', { pageOrientation, oldPageOrientation }
  );
};

// Page margin change hook
const onChangedPageMargin = ({ pageMargin, oldPageMargin }) => {
  console.log(
    'onChanged:pageMargin',
    'Page margin information has changed, available parameters:', { pageMargin, oldPageMargin }
  );
};

// Page background change hook
const onChangedPageBackground = ({ pageBackground, oldPageBackground }) => {
  console.log(
    'onChanged:pageBackground',
    'Page background has changed, available parameters:', { pageBackground, oldPageBackground }
  );
};

// Zoom level change hook
const onChangedZoom = ({ zoomLevel, oldZoomLevel }) => {
  console.log(
    'onChanged:pageZoom',
    'Page zoom level has changed, available parameters:', { zoomLevel, oldZoomLevel }
  );
};

// Show table of contents change hook
const onChangedPageShowToc = (showToc) => {
  console.log(
    'onChanged:pageShowToc',
    'Page TOC panel display status has changed, available parameters:', showToc
  );
};

// Preview mode change hook
const onChangedPreview = (enabled) => {
  console.log(
    'onChanged:pagePreview',
    'Page preview mode has changed, available parameters:', enabled
  );
};

// Page watermark change hook
const onChangedPageWatermark = ({ pageWatermark, oldPageWatermark }) => {
  console.log(
    'onChanged:pageWatermark',
    'Page watermark information has changed, available parameters:', { pageWatermark, oldPageWatermark }
  );
};

// Locale setting change hook
const onChangedLocale = ({ locale, oldLocale }) => {
  console.log(
    'onChanged:locale',
    'Language setting has changed, available parameters:', { locale, oldLocale }
  );
};

// Theme setting change hook
const onChangedTheme = (theme) => {
  console.log('onChanged:theme', 'Theme setting has changed, available parameters:', theme);
};

// Content parsing error hook
const onContentError = ({ editor, error, disableCollaboration }) => {
  console.log(
    'onContentError',
    'Document content parsing error, available parameters:', { editor, error, disableCollaboration }
  )
}

// Print event hook
const onPrint = () => {
  console.log('onPrint', 'Editor gains focus, no available parameters');
};

// Focus event hook
const onFocus = () => {
  console.log('onFocus', 'Editor gains focus, available parameters:', { editor, event });
};

// Blur event hook
const onBlur = () => {
  console.log('onBlur', 'Editor loses focus, available parameters:', { editor, event });
};

// Save event hook
const onSaved = () => {
  console.log('onSaved', 'Document has been saved, no available parameters');
};

// Destruction lifecycle hook
const onDestroy = () => {
  console.log('onDestroy', 'Editor component has been destroyed, no available parameters');
};
</script>
```

## Event Description

| Event Name | Trigger Timing / Description | Available Parameters |
| --- | --- | --- |
| beforeCreate | Editor is about to be created | - |
| created | Editor has been created | \{ editor \} |
| changed | Editor content has been updated | \{ editor \} |
| changed:selection | Selected content has changed | \{ editor \} |
| changed:transaction | Editor state has changed | \{ editor, transaction \} |
| changed:menu | Menu state has changed | currentMenu |
| changed:toolbar | Toolbar information has changed | \{ toolbar, oldToolbar \} |
| changed:pageSize | Page size information has changed | \{ pageSize, oldPageSize \} |
| changed:pageOrientation | Page orientation has changed | \{ pageOrientation, oldPageOrientation \} |
| changed:pageMargin | Page margin information has changed | \{ pageMargin, oldPageMargin \} |
| changed:pageBackground | Page background has changed | \{ pageBackground, oldPageBackground \} |
| changed:pageZoom | Page zoom level has changed | \{ zoomLevel, oldZoomLevel \} |
| changed:pageShowToc | Page outline panel display state has changed | showToc |
| changed:pagePreview | Page preview mode has changed | enabled |
| changed:pageWatermark | Page watermark information has changed | \{ pageWatermark, oldPageWatermark \} |
| changed:locale | Language setting has changed <Badge theme="success">New in v2.0.0</Badge> | \{ locale, oldLocale \} |
| changed:theme | Theme setting has changed <Badge theme="success">New in v2.1.0</Badge> | theme |
| content-error | Document content parsing error <Badge theme="success">New in v2.3.0</Badge> | \{ editor, error, disableCollaboration \} |
| print | Page print <Badge theme="success">New in v1.1.0</Badge> | - |
| focus | Editor gains focus | \{ editor, event \} |
| blur | Editor loses focus | \{ editor, event \} |
| saved | Document has been saved | - |
| destroy | Editor component has been destroyed | - |